<template>
    <view class="content">
        <view class="top-bg">
            <image :src="data.image" class="bg"></image>
            <view class="mask"></view>
        </view>
        <u-navbar :background="background" title="详情" title-color="#fff" :border-bottom="false" :immersive="true" 
            :is-back="true" back-icon-color="#fff"></u-navbar>
        
        <view :style="{marginTop: statusBar + 45 + 'px'}">
            <view class="yrz-box">
                <image :src="IMAGEURL + 'static/image/yrz.png'" class="yrz-icon"></image>
            </view>
            <view class="box">
                <image :src="data.service_img" class="avatar"></image>
                <view class="u-flex u-row-right" @click="doCollect">
                    <view class="sc-btn" v-if="data.collect == 1">
                        <u-icon name="star-fill" color="#fff" size="24" label="已收藏" label-size="24" label-color="#fff"></u-icon>
                    </view>
                    <view class="sc-btn" v-else>
                        <u-icon name="star" color="#fff" size="24" label="收藏" label-size="24" label-color="#fff"></u-icon>
                    </view>
                </view>
                <view class="u-flex u-p-b-45">
                    <view class="name">{{data.name}}</view>
                    <u-rate :count="data.star" v-model="data.star" active-color="#fec427" size="26" gutter="5" disabled></u-rate>
                    <!-- <u-icon name="star-fill" color="#fec427" size="28"></u-icon> -->
                    <!-- <view class="star-num">{{data.star}}</view> -->
                </view>
                <view class="special">
                    <view class="s-tit">
                        <image :src="IMAGEURL + 'static/icon/icon_06.png'" class="icon-06"></image>
                        <view>擅长</view>
                    </view>
                    <view class="u-p-t-20">
                        <u-parse :html="data.be_good_at"></u-parse>
                    </view>
                </view>
            </view>
            
            <view class="line"></view>
            
            <view class="item">
                <view class="title">技能证书</view>
                <view class="img-box">
                    <image class="img" v-for="(item, index) in data.skill_images" :key="index" 
                        :src="item.image" @click="doPreview(item.image, index)"></image>
                </view>
            </view>
            
            <view class="item">
                <view class="title">个人照片</view>
                <view class="daily-box">
                    <view class="daily">
                        <image :src="data.work_img" class="d-img" @click="doPreview(data.work_img)"></image>
                        <view>工作</view>
                    </view>
                    <view class="daily">
                        <image :src="data.life_img" class="d-img" @click="doPreview(data.life_img)"></image>
                        <view>生活</view>
                    </view>
                    <view class="daily">
                        <image :src="data.skill_img" class="d-img" @click="doPreview(data.skill_img)"></image>
                        <view>技能</view>
                    </view>
                </view>
            </view>
            
            <view class="item">
                <view class="title">服务时间</view>
                <view class="list" v-for="(item, index) in data.service_time" :key="index">
                    <!-- <image src="../../static/icon/s_time.png" class="s-time"></image> -->
                    <view class="text">{{item.week}}  {{item.start_time}}-{{item.end_time}}</view>
                </view>
            </view>
            <view class="item">
                <view class="title">陪伴师已约时间</view>
                <view class="list" v-for="(item, index) in data.order_time" :key="index">
                    <!-- <image src="../../static/icon/s_time.png" class="s-time"></image> -->
                    <view class="text">{{item.date}} ({{item.week}})  {{item.start_time}}-{{item.end_time}}</view>
                </view>
            </view>
        </view>
        
        <!-- 美洽 -->
        <view class="footer" v-if="!fromSettlement">
            <view class="kefu" @click="QRshow = true">
                <image :src="IMAGEURL + 'static/icon/icon_15.png'" class="icon-15"></image>
                <view>客服</view>
            </view>
            <view class="btn" @click="buy">立即选择</view>
        </view>
        
        <!-- 选择服务弹窗 -->
        <u-popup v-model="show" :round="true" mode="bottom" :closeable="true" width="750rpx" height="600px" border-radius="14">
            <view>
                <view class="pop-title">选择服务</view>
                <!-- sId,//服务id 1伙伴计划(包括热门服务、公司宣传) 2伙伴定制服务 3伙伴+ 4家庭教育课堂
                sType,//伙伴计划类型 1伙伴计划 2热门服务1 3热门服务2 4公司宣传
                iId,//服务项目id 一级规格
                itId,//服务项目id 二级规格
                puId,//公司宣传id -->
                <view class="pop-box">
                    <view class="nav">
                        <scroll-view scroll-x>
                            <view class="nav-i">
                                <view class="nav-i2" :class="{navActive : cateId == item.id}"
                                    v-for="(item, index) in serviceItems.items" :key="index" @click="chooseCate(item)">
                                    <image :src="item.image" class="nav-img"></image>
                                    <view class="nav-text">{{item.name}}</view>
                                </view>
                            </view>
                        </scroll-view>
                    </view>
                    <!-- <view class="u-flex u-p-b-30">
                        <image src="../../static/del/20.png" class="nav-img"></image>
                        <view class="u-font-36 u-p-l-15">陪学习</view>
                        <view class="c-cate">| 数学</view>
                    </view> -->
                    <view class="nav-c">
                        <view class="nav-c-i" :class="{navCActive : cateChildId == item.id}" 
                            v-for="(item, index) in serviceChild" :key="index" @click="chooseCateChild(item)">
                            {{item.name}}
                            <image :src="IMAGEURL + 'static/icon/choose_03.png'" class="choose-03" v-if="cateChildId == item.id"></image>
                        </view>
                    </view>
                </view>
                <view class="pop-line"></view>
                <view class="pop-box u-p-b-30">
                    <view class="pop-nav">
                        <view class="pop-nav-i" :class="{active : type == 1}" @click="chooseNav(1)">单次服务</view>
                        <view class="pop-nav-i" :class="{active : type == 2}" @click="chooseNav(2)">周期服务</view>
                    </view>
                    <view class="nav">
                        <scroll-view scroll-x>
                            <view class="nav-i">
                                <view class="nav-day" v-if="type == 1" :class="{activeDay : weekDay == item.day && !item.before}"
                                    v-for="(item, index) in serviceItems.week" :key="index" @click="chooseDay(item, index)">
                                    <view>{{item.week}}</view>
                                    <view class="day" :class="{activeDay : weekDay == item.day && !item.before, deactiveDay : item.before}">
                                        {{item.day}}
                                    </view>
                                    <view class="spot" v-if="weekDay == item.day && !item.before"></view>
                                </view>
                                
                                <view class="nav-day" v-if="type == 2" :class="{activeDay : weekId == item.week_id}"
                                    v-for="(item, index) in serviceItemsWeek" :key="index" @click="chooseDay(item, index)">
                                    <view>{{item.week}}</view>
                                    <view class="spot" v-if="weekId == item.week_id"></view>
                                </view>
                            </view>
                        </scroll-view>
                    </view>
                    <view>开始时间选择</view>
                    <view class="u-flex time">
                        <view class="t-box" @click="open(1)">
                            <input type="text" v-model="startTime" placeholder="请选择时间" disabled />
                        </view>
                        <view class="line"></view>
                        <view class="t-box" @click="open(2)">
                            <input type="text" v-model="endTime" placeholder="请选择时间" disabled />
                        </view>
                        <view class="search" v-if="type == 2" @click="confirm">确定</view>
                    </view>
                    <!-- <scroll-view :scroll-y="true" style="height: 300rpx;"> -->
                        <view class="zhouqi" v-if="type == 2 && weekList.length > 0">
                            <view class="zq-i" v-for="(item, index) in weekList" :key="index">
                                <view>{{item.week}}</view>
                                <view>{{item.time}}</view>
                                <view class="zq-i-close" @click="delTime(index)">
                                    <u-icon name="close-circle-fill" color="#9e9e9e" size="38"></u-icon>
                                </view>
                            </view>
                        </view>
                    <!-- </scroll-view> -->
                    <view class="u-p-t-10" v-if="type == 2">需要服务周数</view>
                    <view class="zs-box" v-if="type == 2">
                        <input type="number" v-model="weekNum" placeholder="请输入" class="zs-inp">
                        周
                    </view>
                    <view class="pop-btn" @click="$noMultipleClicks(doBuy)">立即预约</view>
                </view>
            </view>
        </u-popup>
        
        <!-- 选择时间 -->
        <!-- <u-picker v-model="KStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(1, $event)"></u-picker> -->
        <!-- <u-picker v-model="JStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(2, $event)"></u-picker> -->
        <template v-if="KStimeShow">
            <u-select v-model="KStimeShow" mode="mutil-column" :list="timeList" @confirm="chooseTime(1, $event)"></u-select>
        </template>
        <template v-if="JStimeShow">
            <u-select v-model="JStimeShow" mode="mutil-column" :list="timeList" @confirm="chooseTime(2, $event)"></u-select>
        </template>
        
        <!-- 企业微信二维码 -->
        <u-mask :show="QRshow" mode="center" border-radius="15">
            <view class="popup2">
                <view class="win-box3">
                    <view class="u-p-40">
                        <image :src="service.qr_code" :show-menu-by-longpress="true" class="qr-img" @click.stop="$previewImage(service.qr_code)"></image>
                        <view class="gzh-text">长按识别二维码添加企业微信</view>
                    </view>
                    <image @click="QRshow = false" class="pop-del2" :src="IMAGEURL + 'static/icon/close_02.png'"></image>
                </view>
            </view>
        </u-mask>
    </view>
</template>

<script>
    import { IMAGEURL } from '@/static/js/common.js';
    
    const currentDate = new Date();
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth() + 1; // 月份是从 0 开始计数的，因此要加1
    const day = currentDate.getDate();
    const DATE = `${year}/${month}/${day}`
    
    export default {
        data() {
            return {
                QRshow: false,
                IMAGEURL,
                noClick:true,//连点
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
                show: false, //选择服务弹窗
                type: 1,//1单次 2周期
                KStimeShow: false, //开始时间
                JStimeShow: false, //结束时间
                startTime: '', //开始时间
                endTime: '', //结束时间
                timeParams: { //时间格式
                	year: false,
                	month: false,
                	day: false,
                	hour: true,
                	minute: true,
                	second: false
                },
                data: {},
                id: '',
                serviceItems: {},
                serviceChild: [],//二级分类
                cateId: '',//一级分类id
                cateChildId: '',//二级分类id
                weekId: '',//选择日期id
                weekDay: '',//选择日期
                weekIndex: '',
                weekList: [],//选择的周期服务时间
                weekNum: '',//服务周数
                timeList: [
                    [{value: 0,label: '0时'},{value: 1,label: '1时'},{value: 2,label: '2时'},{value: 3,label: '3时'},{value: 4,label: '4时'},{value: 5,label: '5时'},{value: 6,label: '6时'},{value: 7,label: '7时'},{value: 8,label: '8时'},{value: 9,label: '9时'},{value: 10,label: '10时'},{value: 11,label: '11时'},{value: 12,label: '12时'},{value: 13,label: '13时'},{value: 14,label: '14时'},{value: 15,label: '15时'},{value: 16,label: '16时'},{value: 17,label: '17时'},{value: 18,label: '18时'},{value: 19,label: '19时'},{value: 20,label: '20时'},{value: 21,label: '21时'},{value: 22,label: '22时'},{value: 23,label: '23时'}],
                    [{value: '00',label: '00分'},{value: 10,label: '10分'},{value: 20,label: '20分'},{value: 30,label: '30分'},{value: 40,label: '40分'},{value: 50,label: '50分'}] ],
                
                // timeList: [
                //     [{value: 6,label: '6时'},{value: 7,label: '7时'},{value: 8,label: '8时'},{value: 9,label: '9时'},{value: 10,label: '10时'},{value: 11,label: '11时'},{value: 12,label: '12时'},{value: 13,label: '13时'},{value: 14,label: '14时'},{value: 15,label: '15时'},{value: 16,label: '16时'},{value: 17,label: '17时'},{value: 18,label: '18时'},{value: 19,label: '19时'},{value: 20,label: '20时'}],
                //     [{value: '00',label: '00分'},{value: 10,label: '10分'},{value: 20,label: '20分'},{value: 30,label: '30分'},{value: 40,label: '40分'},{value: 50,label: '50分'}] ],
                time1: 0,
                time2: 0,
                isNull: false,
                serviceItemsWeek: [{week: "周一", week_id: 1},{week: "周二", week_id: 2},{week: "周三", week_id: 3},{week: "周四", week_id: 4},{week: "周五", week_id: 5},{week: "周六", week_id: 6},{week: "周日", week_id: 7}],
                fromSettlement: '',
                service: {},
            };
        },
        onLoad(option) {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
            if (option.fromSettlement) {
                this.fromSettlement = option.fromSettlement
            }
            this.id = option.id
            this.getData()
            this.getServiceItems()
            this.getService()
        },
        methods: {
            // 获取客服电话
            getService() {
            	this.$ajax('service_center', {
            		
            	}).then(ret => {
            		this.service = ret.detail
            	});
            },
            
            open(num) {
                if (!this.weekId) {
                    this.$toast('请先选择日期')
                    return
                }
                if (num == 1) {
                    this.KStimeShow = true
                }
                if (num == 2) {
                    this.JStimeShow = true
                }
                
            },
            //选择时间
            chooseTime(num, e) {
                console.log(e,DATE)
                var a = ''
                if (this.type == 1) {
                    a = this.serviceItems.week[this.weekIndex].date.replace(/-/g,  "/")
                } else if (this.type == 2) {
                    a = DATE
                }
                this.isNull = false
            	if (num == 1) {
                    let sn = a + " " + (e[0].value > 9 ? e[0].value : '0' + e[0].value) + ':' + e[1].value + ":" + "00"
                    this.time1 = new Date(sn).getTime()
                    this.startTime = (e[0].value > 9 ? e[0].value : '0' + e[0].value) + ':' + e[1].value
            	}
                if (num == 2) {
                    let en = a + " " + (e[0].value > 9 ? e[0].value : '0' + e[0].value) + ':' + e[1].value + ":" + "00"
                    this.time2 = new Date(en).getTime()
                    this.endTime = (e[0].value > 9 ? e[0].value : '0' + e[0].value) + ':' + e[1].value
            	}
                if (this.startTime && this.endTime) {
                    if (this.startTime > this.endTime) {
                        this.isNull = true
                        this.$toast('结束时间不能小于开始时间')
                        return
                    }
                    let dvalue = this.time2 - this.time1 //毫秒
                    let duration = 3600000 * 2
                    if (dvalue < duration) {
                        this.isNull = true
                        this.$toast('服务时间至少2小时！')
                        return
                    }
                    let num = dvalue % duration
                    if (num !== 0) {
                        this.isNull = true
                        this.$toast('服务时间要为整数')
                        return
                    }
                }
                
                if (this.type == 1 && this.startTime && this.endTime && this.weekId) {
                    // let a = this.serviceItems.week[this.weekIndex].date
                    let b = this.startTime + '-' + this.endTime
                    let c = this.serviceItems.week[this.weekIndex].week
                    let d = this.serviceItems.week[this.weekIndex].week_id
                    let list = []
                    
                    this.$ajax('select_time', {
                    	user_token: this.$getSync('userToken'),
                        type: this.type,//1单次 2周期
                        user_id: this.id,//服务人员id
                        week_id: this.weekId,//星期id 1-7
                        date: a,//单次日期
                        start_time: this.startTime,//开始时间
                        end_time: this.endTime,//结束时间
                    }).then(ret => {
                    	if (ret.success == 1000) {
                            list.push({week_id: d, week: c, date: a, start_time: this.startTime, end_time: this.endTime, time: b})
                    	} else {
                            this.startTime = ''
                            this.endTime = ''
                    		this.$toast(ret.msg)
                    	}
                    })
                }
            },
            
            // 选择一级分类
            chooseCate(item) {
                if (this.cateId == item.id) return
                this.cateId = item.id
                this.serviceChild = item.items
                this.cateChildId = ''
                if (item.items && item.items[0] && item.items[0].id) {
                    this.cateChildId = item.items[0].id
                }
            },
            
            // 选择二级分类
            chooseCateChild(item) {
                if (this.cateChildId == item.id) return
                this.cateChildId = item.id
            },
            
            chooseNav(num) {
                if (this.type == num) return
                this.type = num
                this.startTime = ''
                this.endTime = ''
                this.weekDay = ''
                this.weekId = ''
                this.weekIndex = ''
            },
            
            // 选择日期
            chooseDay(item, index) {
                if (this.type == 1) {
                    if (item.before) {
                        this.$toast('不能选择过去的日期')
                        return
                    } else {
                        if (this.weekDay == item.day) return
                        this.weekDay = item.day
                        this.weekId = item.week_id
                        this.weekIndex = index
                    }
                } else if (this.type == 2){
                    this.weekDay = item.week
                    this.weekId = item.week_id
                }
            },
            
            // 确定选择时间
            confirm() {
                if (this.isNull) {
                    this.$toast('服务时间至少2小时并且是整数')
                    return
                }
                if (!this.weekDay) {
                    this.$toast('请选择日期')
                    return
                }
                if (!this.startTime) {
                    this.$toast('请选择开始时间')
                    return
                }
                if (!this.endTime) {
                    this.$toast('请选择结束时间')
                    return
                }
                
                // let a = this.serviceItems.week[this.weekIndex].date
                let b = this.startTime + '-' + this.endTime
                // let c = this.serviceItems.week[this.weekIndex].week
                // let d = this.serviceItems.week[this.weekIndex].week_id
                let list = []
                list.push({week_id: this.weekId, week: this.weekDay, date: '', start_time: this.startTime, end_time: this.endTime, time: b})
                
                this.$ajax('select_time', {
                	user_token: this.$getSync('userToken'),
                    type: this.type,//1单次 2周期
                    user_id: this.id,//服务人员id
                    week_id: this.weekId,//星期id 1-7
                    date: '',//单次日期
                    start_time: this.startTime,//开始时间
                    end_time: this.endTime,//结束时间
                }).then(ret => {
                	if (ret.success == 1000) {
                        if (this.weekList && this.weekList.length <= 0) {
                            console.log('1111111')
                            this.weekList = list
                        } else {
                            console.log('2222222')
                            // this.weekList.forEach((cur, index) => {
                            //     list.forEach((el, eli) => {
                            //         if (cur.week == el.week && cur.time == el.time) {
                            //             this.$toast('时间不能重复选择')
                            //             list.splice(eli, 1)
                            //         }
                            //     })
                            // })
                            // console.log(this.floorList)
                            // console.log(list)
                            this.weekList = [...this.weekList, ...list]
                        }
                        this.startTime = ''
                        this.endTime = ''
                	} else {
                        this.startTime = ''
                        this.endTime = ''
                		this.$toast(ret.msg)
                	}
                })
            },
            
            // 删除时间
            delTime(index) {
                this.weekList.splice(index, 1)
            },
            
            //立即选择
            buy() {
                if (!uni.getStorageSync('userToken')) {
                    this.$confirm('请先登录并且绑定手机号，是否去登录？',()=>{
                        uni.navigateTo({
                            url: "/pages/login/login"
                        })
                    })
                } else {
                    this.show = true;
                }
            },
                    
            //立即预约
            doBuy() {
                let data = [], num = ''
                if (this.type == 1) {
                    if (this.isNull) {
                        this.$toast('服务时间至少2小时并且是整数')
                        return
                    }
                    if (!this.weekDay) {
                        this.$toast('请选择日期')
                        return
                    }
                    if (!this.startTime) {
                        this.$toast('请选择开始时间')
                        return
                    }
                    if (!this.endTime) {
                        this.$toast('请选择结束时间')
                        return
                    }
                    
                    let a = this.serviceItems.week[this.weekIndex].date
                    let c = this.serviceItems.week[this.weekIndex].week
                    let d = this.serviceItems.week[this.weekIndex].week_id
                    data.push({"week_id":d,"week":c,"date":a,"start_time":this.startTime,"end_time":this.endTime})
                }
                if (this.type == 2) {
                    if (this.weekList && this.weekList.length <= 0) {
                        this.$toast('请选择周期服务时间')
                        return
                    }
                    if (!this.weekNum) {
                        this.$toast('请输入服务周数')
                        return
                    }
                    num = this.weekNum
                    this.weekList.forEach(cur => {
                        data.push({"week_id":cur.week_id,"week":cur.week,"date":cur.date,"start_time":cur.start_time,"end_time":cur.end_time})
                    })
                }
                
            	this.$ajax('order_settlement', {
            		user_token: this.$getSync('userToken'),
                    service_type: 1,//伙伴计划类型 1伙伴计划 2热门服务1 3热门服务2 4公司宣传	
                    items2_id: this.cateChildId,//服务项目id 二级规格
                    type: this.type,//1单次服务 2周期服务
                    cycle: num,//周期 几周
                    publicize_id: '',//公司宣传id
                    user_id: this.id,//服务人员id
                    data: data,//数组 "data":[{"week_id":"1","week":"周一","date":"2023-12-11","start_time":"10:00","end_time":"11:00"}]
            	}).then(ret => {
            		if (ret.success == 1000) {
                        this.show = false
                        this.weekDay = ''
                        this.weekId = ''
                        this.weekIndex = ''
                        this.startTime = ''
                        this.endTime = ''
                        this.weekList = []
                        this.weekNum = ''
                        
                        const newData = JSON.stringify(ret.detail)
                        this.$gTo(`/mine/pages/settlement/settlement?data=${encodeURIComponent(newData)}&sId=${1}&sType=${1}&itId=${this.cateChildId}&userId=${this.id}`)
            		} else {
            			this.$toast(ret.msg)
            		}
            	})
            },
            
            // 收藏
            doCollect() {
                this.$ajax('service_collect', {
                	user_token: this.$getSync('userToken'),
                	id: this.id,//服务人员id
                }).then(ret => {
                	if (ret.success == 1000) {
                        if (this.data.collect == 1) {
                            this.$toast('已取消')
                        } else {
                            this.$toast('已收藏')
                        }
                        this.data.collect = this.data.collect == 1 ? 0 : 1
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            
            //预览照片
            doPreview(item, index) {
                let arr = []
                arr.push(item)
                uni.previewImage({
                    urls: arr,
                    current: index,
                    longPressActions: {
                        success: function(data) {
                        },
                        fail: function(err) {
                        }
                    }
                });
            },
            
            getServiceItems() {
            	this.$ajax('service_items', {
            		user_token: this.$getSync('userToken'),
                    user_id: this.id,
                    items_id: '',//服务一级规格id
                    items2_id: '',//服务二级规格id
                    publicize_id: '',//公司宣传id
            	}).then(ret => {
            		if (ret.success == 1000) {
                        this.serviceItems = ret.detail
                        if (this.serviceItems&&this.serviceItems.items&&this.serviceItems.items[0]) {
                            this.serviceChild = this.serviceItems.items[0].items
                            this.cateId = this.serviceItems.items[0].id
                            this.cateChildId = this.serviceItems.items[0].items[0].id
                        }
                        this.serviceItems.week.forEach(cur => {
                            this.$set(cur, 'day', cur.date.split('-')[2])
                            // 同月、过去的日期
                            if (cur.date.split('-')[1] == month && cur.day < day) {
                                this.$set(cur, 'before', true)
                            }
                        })
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            
            getData() {
            	this.$ajax('service_user_detail', {
            		user_token: this.$getSync('userToken'),
            		id: this.id,
            	}).then(ret => {
            		if (ret.success == 1000) {
                        this.data = ret.detail
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
            	if (e.scrollTop == 0) {
            		this.background.backgroundColor = 'rgba(0,0,0,0)';
            	} else {
            		this.background.backgroundColor = 'rgba(0,0,0,' + a + ')';
            	}
            },
        }
    };
</script>

<style lang="scss">
    .list{
        display: flex;
        justify-content: space-between;
        align-items: center;
        // padding: 35rpx;
        // background-color: #fff;
        // border-radius: 15rpx;
        // margin-bottom: 20rpx;
    }
    .s-time{
        width: 36rpx;
        height: 36rpx;
    }
    .text{
        flex: 1;
        font-size: 32rpx;
        color: #42506c;
        padding: 20rpx 0;
    }
    
    
    // 客服弹窗
    
    .popup2 {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .win-box2 {
        width: 77vw;
        background-color: #ffffff;
        border-radius: 20upx;
        position: relative;
        background: #fff;
        border-radius: 10rpx;
        padding-bottom: 20rpx;
    }
    .win-box3{
        width: 465rpx;
        background-color: #ffffff;
        border-radius: 20upx;
        position: relative;
        background: #fff;
        border-radius: 10rpx;
    }
    .pop-del2 {
        width: 8vw;
        height: 8vw;
        position: absolute;
        left: 27vw;
        bottom: -100upx;
    }
    .qr-img{
        width: 370rpx;
        height: 370rpx;
        margin: auto;
    }
    .gzh-text{
        font-size: 26rpx;
        color: #616161;
        text-align: center;
        padding-top: 10rpx;
    }
    .pop-del {
        width: 8vw;
        height: 8vw;
        position: absolute;
        left: 35vw;
        bottom: -100upx;
    }
    
    
    page{
        background-color: #fff;
    }
    .content{
        padding-bottom: 120px;
    }
    .top-bg{
        width: 750rpx;
        height: 403rpx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .bg{
        width: 750rpx;
        height: 403rpx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .mask{
        width: 750rpx;
        height: 403rpx;
        background: rgba(0, 0, 0, .3);
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    
    .yrz-box{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 15rpx 30rpx;
    }
    .yrz-icon{
        width: 166rpx;
        height: 166rpx;
    }
    .box{
        background-color: #fff;
        border-radius: 35rpx 35rpx 0 0;
        padding: 35rpx 40rpx;
        position: relative;
    }
    .avatar{
        width: 147rpx;
        height: 147rpx;
        border-radius: 50%;
        border: 4rpx solid #fff;
        box-shadow: 2px 2px 3px #e7e7e7;
        position: absolute;
        top: -70rpx;
        left: 40rpx;
    }
    .sc-btn{
        padding: 14rpx 33rpx;
        background-color: #f29700;
        border-radius: 50rpx;
        font-size: 24rpx;
        color: #fff;
    }
    .name{
        font-size: 48rpx;
        padding-right: 15rpx;
    }
    .star-num{
        font-size: 28rpx;
        font-weight: bold;
        padding-left: 6rpx;
    }
    .special{
        padding-top: 25rpx;
        border-top: 2rpx solid #eee;
    }
    .s-tit{
        font-size: 34rpx;
        font-weight: bold;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .icon-06{
        width: 35rpx;
        height: 37rpx;
        margin-right: 10rpx;
    }
    .line{
        width: 100vw;
        height: 20rpx;
        background-color: #f5f5f5;
    }
    
    .item{
        padding: 30rpx 40rpx;
    }
    .title{
        font-size: 34rpx;
        font-weight: bold;
        padding-left: 20rpx;
        position: relative;
    }
    .title::after{
        display: block;
        content: '';
        width: 7rpx;
        height: 34rpx;
        background-color: #f29700;
        border-radius: 50rpx;
        position: absolute;
        left: 0;
        bottom: 4rpx;
    }
    .img-box{
        padding-top: 30rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .img{
        width: 210rpx;
        height: 150rpx;
        border-radius: 10rpx;
        margin-right: 15rpx;
        margin-bottom: 15rpx;
    }
    .img:nth-child(3n) {
        margin-right: 0;
    }
    
    .daily-box{
        padding-top: 30rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .daily{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        margin-right: 15rpx;
    }
    .daily:nth-child(3n) {
        margin-right: 0;
    }
    .d-img{
        width: 210rpx;
        height: 150rpx;
        border-radius: 10rpx;
        margin-bottom: 10rpx;
    }
    
    .footer{
        width: 100vw;
        height: 125rpx;
        background-color: #fff;
        border-top: 2rpx solid #eee;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 25rpx;
    }
    .kefu{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        margin-right: 50rpx;
    }
    .icon-15{
        width: 37rpx;
        height: 39rpx;
        margin-bottom: 5rpx;
    }
    .btn{
        flex: 1;
        font-size: 30rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        background-color: #f29700;
        border-radius: 15rpx;
    }
    
    
    
    .pop-box{
        padding: 0 20rpx;
    }
    .pop-title{
        font-size: 34rpx;
        font-weight: bold;
        text-align: center;
        padding: 30rpx 20rpx 0;
    }
    .nav{
        width: 100%;
        white-space: nowrap;
        padding: 30rpx 0;
    }
    .nav-i{
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
    }
    .nav-i2{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 130rpx;
        height: 170rpx;
        background-color: #f8f9fb;
        border-radius: 15rpx;
        padding: 0 8rpx;
        margin-right: 10rpx;
        box-sizing: border-box;
    }
    
    .nav-day{
        // width: 92rpx;
        width: calc(650rpx / 7);
        height: 122rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #f8f9fb;
        border-radius: 15rpx;
        padding: 0 20rpx;
        margin-right: 10rpx;
        box-sizing: border-box;
        font-size: 26rpx;
        color: #a4a4a4;
        position: relative;
    }
    .day{
        font-size: 32rpx;
        color: #000;
    }
    .activeDay{
        color: #fff;
        background-color: #f29700;
    }
    .deactiveDay{
        color: #a4a4a4;
    }
    .spot{
        position: absolute;
        bottom: 10rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 9rpx;
        height: 9rpx;
        background-color: #fff;
        border-radius: 50%;
        margin-top: 30rpx;
    }
    
    .nav-img{
        width: 72rpx;
        height: 72rpx;
        border-radius: 50%;
    }
    .nav-text{
        font-size: 24rpx;
        text-align: center;
        width: 114rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-top: 13rpx;
    }
    .c-cate{
        font-size: 32rpx;
        color: #606370;
        padding-left: 10rpx;
    }
    .navActive{
        border: 2rpx solid #f29700;
    }
    .nav-c{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        padding: 30rpx 0 15rpx;
        border-top: 2rpx solid #eee;
    }
    .nav-c-i{
        font-size: 24rpx;
        padding: 25rpx 50rpx;
        background-color: #f8f9fb;
        border-radius: 10rpx;
        margin-right: 15rpx;
        margin-bottom: 15rpx;
        box-sizing: border-box;
        position: relative;
    }
    .navCActive{
        border: 2rpx solid #f29700;
    }
    .choose-03{
        width: 30rpx;
        height: 26rpx;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .pop-line{
        width: 750rpx;
        height: 15rpx;
        background-color: #f5f5f5;
    }
    .pop-nav{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .pop-nav-i{
        padding: 25rpx 35rpx 15rpx;
        font-size: 30rpx;
        font-weight: bold;
    }
    .active{
        font-size: 36rpx;
        position: relative;
    }
    .active::after{
        display: block;
        content: '';
        width: 42rpx;
        height: 9rpx;
        border-radius: 20rpx;
        background-color: #f29700;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .time {
        width: 100%;
        background-color: #f3f3f3;
        border-radius: 10rpx;
        padding: 10rpx;
        margin: 10rpx 0;
        
        .t-box{
            flex: 1;
            height: fit-content;
            background-color: #fff;
            position: relative;
            padding-right: 70rpx;
            border-radius: 10rpx;
        }
    
        input {
            width: 100%;
            height: 68rpx;
            font-size: 28rpx;
            color: #333333;
            text-indent: 25rpx;
            line-height: 68rpx;
            padding-left: 10rpx;
            text-align: center;
        }
    
        .line {
            width: 16rpx;
            height: 4rpx;
            background-color: #f29700;
            margin: 0 10rpx;
        }
    
        .search {
            font-size: 24rpx;
            color: #fff;
            line-height: 68rpx;
            background-color: #f29700;
            border-radius: 10rpx;
            padding: 0 48rpx;
            margin-left: 20rpx;
        }
    }
    .zhouqi{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        padding-top: 20rpx;
    }
    .zq-i{
        width: calc(670rpx / 3);
        font-size: 26rpx;
        color: #3981f4;
        background-color: #f2f7ff;
        border: 2rpx solid #d4e3fd;
        border-radius: 15rpx;
        padding: 10rpx 0 10rpx 15rpx;
        // display: flex;
        // flex-direction: column;
        // justify-content: center;
        // align-items: flex-start;
        margin-right: 15rpx;
        margin-bottom: 20rpx;
        position: relative;
    }
    .zq-i:nth-child(3n) {
        margin-right: 0;
    }
    .zq-i-close{
        display: block;
        position: absolute;
        top: -10rpx;
        right: -10rpx;
        z-index: 1;
    }
    .zs-box{
        width: 330rpx;
        height: 76rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f8f9fb;
        border-radius: 15rpx;
        padding: 0 20rpx;
        margin: 15rpx 0 30rpx;
    }
    .zs-inp{
        width: 100%;
    }
    .pop-btn{
        font-size: 30rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        background-color: #f29700;
        border-radius: 15rpx;
        margin-top: 15rpx;
        margin-bottom: 30rpx;
    }
    

</style>
